<template>
	<div class="address">
		<van-nav-bar class="custom-nav-bar" title="收货地址" left-text="返回" left-arrow @click-left="onClickLeft" />
		<div class="address-item" v-for="(item, index) in addressList">
			<div class="address-item-left">
				<div class="address-item-left-top">
					<div class="address-item-left-top-name">{{ item.name }}</div>
					<div class="address-item-right-top-phone">{{ item.phone }}</div>
				</div>
				<div class="address-item-left-bottom">{{ item.address }}</div>
               
			</div>
			<div>
				<span class="address-item-middle" @click="changeDefault(item)">{{ item.morenValue}}</span>
				</div>
			<span class="address-item-right" @click="updata(item)">编辑</span>
			<span class="address-item-red" @click="addressDele(item)">删除</span>
		</div>

		<div class="push" @click="push">
			新建地址
		</div>

	</div>

</template>
<script setup lang="ts">
import { ref, reactive, watch, onMounted,computed } from 'vue'
import { useRouter } from 'vue-router';
const $router = useRouter();
import { Token } from '../../utils/request';
import { showFailToast } from 'vant';




const onClickLeft = () => $router.back();
const push = () => $router.push('/pushaddress');
interface addressItem {
	address_id:any,
	userId:any,
	phone:any,
	name:any,
	address:any,
	moren:any,
	morenValue:any
}
const addressList = ref<addressItem[]>([]);

const getData = () => {
	Token('/api/address', 'get', {}).then((res: any) => {
		res.data.forEach((item:any) => {
			item.morenValue = item.moren == 1 ? '使用默认' : '设为默认';
		})
		addressList.value = res.data ;
		console.log(res.data);
	});

}
getData();

// 检查是否有默认地址
const hasDefaultAddress = computed(() => {
    return addressList.value.some(item => item.moren === 1);
});

//删除地址
const addressDele = (item:any) => {
	console.log(item.address_id);
	Token('/api/address', 'delete', {address_id:item.address_id}).then((res: any) => {
		if (res.status == 200) {
			showFailToast('删除地址成功');
			getData();	
		}
	});
}
//改变默认
const changeDefault = (item:any) => {
	if(item.moren == 0){
		showFailToast('已使用默认地址');
		item.morenValue = '使用默认';
		$router.push({
			path: '/sureOrder',
			query: {
				address_id:item.address_id,
				address:item.address
			}
		});
	}
	if(item.moren == 1){
		item.morenValue = '设为默认';
		$router.push({
			path: '/sureOrder',
			query: {
				address_id:item.address_id,
				address:item.address
			}
		});
	}
}

//更新地址
const updata = (item:any) => {
	$router.push({
		path: '/updataddress',
		query: {
			address_id:item.address_id,
			phone:item.phone,
			name:item.name,
			address:item.address,
			moren:item.moren
		}
	});
}
onMounted(() => {
	getData()
});
</script>
<style  scoped>


.address-item-red{
	color: red;
}
.address-item-middle{
	background-color: rgb(63, 161, 157);
	padding: 5px 10px;
	border-radius: 10px;
	color: #fff;
	font-size: 26px;
	margin-top: 10px;
}
.address {
	width: 100%;
	height: 100vh;
	background-color: #ededed;
}

.address-item {
	width: 100%;
	height: 140px;
	background-color: #fff;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 20px;
	box-sizing: border-box;
	margin-bottom: 20px;
	margin-top: 20px;
}

.address-item-right-top-phone {
	font-size: 30px;
	margin-left: 20px;
}

.address-item-left {
	display: flex;
	flex-direction: column;
	justify-content: space-around;
}

.address-item-left-top {
	display: flex;
	align-items: center;
}

.address-item-left-top-name {
	font-size: 30px;
	color: #333;
}

.address-item-left-bottom {
	font-size: 26px;
	color: #666;
	margin-top: 20px;
	width: 350px;
}

.address-item-right {
	font-size: 30px;
	color: rgb(63, 161, 157);
}

.push {
	width: 100%;
	margin: 0 auto;
	position: fixed;
	bottom: 0;
	height: 100px;
	background-color: rgb(63, 161, 157);
	text-align: center;
	line-height: 100px;
	font-size: 30px;
	color: #fff;
}
</style>